月: 2021年5月

app.js:36 WebXR Device APIへの接続を管理し、各フレームでのレンダリングを処理するコンテナクラス(初期コード)。 this.createXRCanvas(); でカメラの背景とバーチャルシーンを格納するキャンバス(Canvas)を作成(後述)、 await this.onSessionStarted(); すべての設定が完了したら、アプリを起動。 https://j.mp/342Cbza

aki



from Twitter https://twitter.com/o_ob

workshop/app.js:22 WebXR サポートを問い合わせて[immersive-ar]モードがないときはエラーを表示。 await navigator.xr.isSessionSupported(“immersive-ar”); この辺りの詳細はMozillaMDNに日本語ドキュメントあります https://j.mp/3f55CGX https://j.mp/3v7IVaS

aki



from Twitter https://twitter.com/o_ob

実機のChromeで該当のページが表示されます。 [inspect]を押すとDevToolsのウインドウにもその様子が表示されます(Unsupported Browserと出ている） DevTools の[Sources]タブ[Page]でページツリーを表示させながらデバッグする。 https://j.mp/3hIAHlA

aki



from Twitter https://twitter.com/o_ob

[Discover USB Devices]の項目でポートフォワード設定。実機→開発サーバの設定する場合、例えば [8887],[localhost:8887]として[Enable Port Forwarding]を☑️します。続いてDevToolsの[Remote Target](実機) の[Chrome][Open Tab with URL]にそのURL[http://127.0.0.1:8887/workshop/]を貼付してOpen

aki



from Twitter https://twitter.com/o_ob

Web Server for Chrome機能拡張 にて`AR-WITH-WEBXR` (git clone したディレクトリ)を指定。 ローカルサーバが立ち上げられますので https://j.mp/3fsIyB2 を開く。 chrome://inspect でChrome DevToolsにUSBデバッグが設定＆接続されたAndroidデバイスが表示されているはず。

aki



from Twitter https://twitter.com/o_ob

ではプロジェクトの中身へ… ▶︎workshop/index.html material componentsライブラリ, three.js, GLTFLoader.jsを使ってます。 タグで[AR開始]ボタンを用意するだけ ▶︎workshop/app.js WebXRサポートを問い合わせる。もしimmersive-arモードがない場合はエラー表示。 →Webサーバの設定をします

aki



from Twitter https://twitter.com/o_ob

つまり… – Android Studioはなくても大丈夫 – Visual Studio Codeでもよき – HTML、CSS、JavaScript、Chrome DevTools に関する基本的な知識 これならChromebookでもいけるかもしれんね！ Githubリポジトリはこちら https://j.mp/3hHErUC ライセンスは Apache 2.0

aki



from Twitter https://twitter.com/o_ob

WebXR Device APIによるARアプリの構築に必要なもの -GithubでClone -ARCore対応Androidデバイス -ARCoreインストール(Chrome が自動インストール) -Google Chrome -Web Server for Chrome拡張(もしくはお好みのサーバ) -デバイスと開発環境を接続するUSB ケーブル -テキストエディタ これだけ！

aki



from Twitter https://twitter.com/o_ob